<ion-header>
  <ion-toolbar color="primary">
    <ion-title><span translate>Settings</span></ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <% if (props.auth) { -%>
  <div>
    <div class="profile ion-text-center ion-padding">
      <ion-icon class="profile-icon" name="person-circle"></ion-icon>
      <div class="profile-title">{{username}}</div>
    </div>
  </div>
  <% } -%>
  <ion-list>
    <ion-list-header>
      <ion-label translate>Account</ion-label>
    </ion-list-header>
    <ion-item button>
      <ion-icon name="person-circle" slot="start"></ion-icon>
      <ion-label translate>Profile</ion-label>
    </ion-item>
    <% if (props.auth) { -%>
    <ion-item button (click)="logout()">
      <ion-icon name="log-out" slot="start"></ion-icon>
      <ion-label translate>Logout</ion-label>
    </ion-item>
    <% } -%>
    <ng-container *ngIf="isWeb">
      <ion-list-header>
        <ion-label translate>Preferences</ion-label>
      </ion-list-header>
      <app-language-selector type="item"></app-language-selector>
    </ng-container>
  </ion-list>
</ion-content>
